<template>
  <el-card class="box-card">
    <!-- 查询内容 -->
    <div slot="header" class="clearfix">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="产品名称">
          <el-input
            v-model="formInline.materialName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品状态">
          <el-select filterable v-model="formInline.materialState" placeholder="产品状态">
            <el-option label="未启用" value="未启用"></el-option>
            <el-option label="已启用" value="已启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.times"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            icon="el-icon-search"
            style="background-color: rgba(26, 179, 148); border: none"
            >查询</el-button
          >
        </el-form-item>
        <!-- 新增 -->
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="dialogFormVisible = true"
            icon="el-icon-plus"
            style="background-color: rgba(26, 123, 185); border: none"
            >新增</el-button
          >
        </el-form-item>
        <!-- 刷新 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="reset"
            icon="el-icon-refresh"
            style="background-color: rgba(247, 165, 74); border: none"
            >刷新</el-button
          >
        </el-form-item>
        <!-- 批量删除 -->
        <el-form-item>
          <el-button
            type="danger"
            @click="deleteData"
            icon="el-icon-delete"
            :disabled="disabled"
            style=" border: none"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div style="height: calc(100vh - 290px)">
      <el-table
        :data="tableData"
        border
        height="100%"
        style="width: 100%; height: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        highlight-current-row
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="checkDate"
          label="复核日期"
          sortable
          width="140"
        ></el-table-column
        ><el-table-column
          prop="materialCode"
          label="产品代码"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="materialName"
          label="产品名称"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="materialType"
          label="产品类型"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="dosageForm"
          label="剂型"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="materialSpecifications"
          label="产品规格"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="materialState"
          sortable
          width="100"
          label="产品状态"
        ></el-table-column>
        <el-table-column
          prop="materialSellbyDate"
          sortable
          label="产品保质期"
          width="120"
        ></el-table-column>
        <el-table-column prop="remark" sortable label="备注"></el-table-column>
        <el-table-column
          prop="checkState"
          sortable
          label="复核状态"
        ></el-table-column>
        <!-- <el-table-column
          prop="checker"
          sortable
          label="复核人"
        ></el-table-column> -->
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.row)"
              icon="el-icon-edit"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="text-align: right; background-color: #fff"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 7, 10, 20]"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      class="showAll_dialog"
      :visible.sync="dialogFormVisible"
      title="新增"
      width="80%"
    >
      <el-form
        size="small"
        style="width: 100%"
        label-width="100px"
        :model="form"
      >
        <!-- 产品名称 -->
        <el-form-item label="产品名称">
          <el-input
            style="width: 100%"
            v-model="form.materialName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <!-- 产品代码 -->
        <el-form-item label="产品代码">
          <el-input
            style="width: 100%"
            v-model="form.materialCode"
            placeholder="产品代码"
          ></el-input>
        </el-form-item>
        <!-- 产品状态 -->
        <el-form-item label="产品状态">
          <el-select
            style="width: 100%"
            v-model="form.materialState"
            placeholder="产品状态"
          >
            <el-option label="未启用" value="未启用"></el-option>
            <el-option label="已启用" value="已启用"></el-option>
          </el-select>
        </el-form-item>
        <!-- 产品类型 -->
        <el-form-item label="产品类型">
          <el-select
            style="width: 100%"
            v-model="form.materialType"
            placeholder="产品类型"
            filterable
          >
            <el-option label="药品" value="药品"></el-option>
          </el-select>
        </el-form-item>
        <!-- 剂型 -->
        <el-form-item label="剂型">
          <el-select
            style="width: 100%"
            v-model="form.dosageForm"
            placeholder="剂型"
            filterable
          >
            <el-option label="片剂" value="片剂"></el-option>
          </el-select>
        </el-form-item>
        <!-- 产品规格 -->
        <el-form-item label="产品规格">
          <el-input
            style="width: 100%"
            v-model="form.materialSpecifications"
            placeholder="产品规格"
          ></el-input>
          <!-- <el-select
            style="width: 100%"
            v-model="form.materialSpecifications"
            placeholder="产品规格"
            filterable
          >
            <el-option label="药品" value="药品"></el-option>
          </el-select> -->
        </el-form-item>
        <!-- 产品保质期 -->
        <el-form-item label="产品保质期">
          <el-date-picker
            style="width: 100%"
            v-model="form.materialSellbyDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择物质保质期"
          ></el-date-picker>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注">
          <el-input
            style="width: 100%"
            v-model="form.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
        <!-- 复核状态 -->
        <el-form-item label="复核状态">
          <el-select
            style="width: 100%"
            v-model="form.checkState"
            placeholder="复核状态"
            filterable
          >
            <el-option label="已复核" value="已复核"></el-option>
            <el-option label="未复核" value="未复核"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日期 -->
        <el-form-item label="日期">
          <el-date-picker
            style="width: 100%"
            v-model="form.checkDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="addNew">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="showAll_dialog"
      :visible.sync="editFormVisiable"
      title="修改"
      width="80%"
    >
      <el-form
        size="small"
        style="width: 100%"
        label-width="100px"
        :model="editForm"
      >
        <!-- 产品名称 -->
        <el-form-item label="产品名称">
          <el-input
            style="width: 100%"
            v-model="editForm.materialName"
            placeholder="产品名称"
          ></el-input>
        </el-form-item>
        <!-- 产品代码 -->
        <el-form-item label="产品代码">
          <el-input
            style="width: 100%"
            v-model="editForm.materialCode"
            placeholder="产品代码"
          ></el-input>
        </el-form-item>
        <!-- 产品状态 -->
        <el-form-item label="产品状态">
          <el-select
            style="width: 100%"
            v-model="editForm.materialState"
            placeholder="产品状态"
          >
            <el-option label="未启用" value="未启用"></el-option>
            <el-option label="已启用" value="已启用"></el-option>
          </el-select>
        </el-form-item>
        <!-- 产品类型 -->
        <el-form-item label="产品类型">
          <el-select
            style="width: 100%"
            v-model="editForm.materialType"
            placeholder="产品类型"
            filterable
          >
            <el-option label="药品" value="药品"></el-option>
          </el-select>
        </el-form-item>
        <!-- 剂型 -->
        <el-form-item label="剂型">
          <el-select
            style="width: 100%"
            v-model="editForm.dosageForm"
            placeholder="剂型"
            filterable
          >
            <el-option label="片剂" value="片剂"></el-option>
          </el-select>
        </el-form-item>
        <!-- 产品规格 -->
        <el-form-item label="产品规格">
          <el-input
            style="width: 100%"
            v-model="editForm.materialSpecifications"
            placeholder="产品规格"
          ></el-input>
          <!-- <el-select
            style="width: 100%"
            v-model="editForm.materialSpecifications"
            placeholder="产品规格"
            filterable
          >
            <el-option label="药品" value="药品"></el-option>
          </el-select> -->
        </el-form-item>
        <!-- 产品保质期 -->
        <el-form-item label="产品保质期">
          <el-date-picker
            style="width: 100%"
            v-model="editForm.materialSellbyDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择物质保质期"
          ></el-date-picker>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注">
          <el-input
            style="width: 100%"
            v-model="editForm.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
        <!-- 复核状态 -->
        <el-form-item label="复核状态">
          <el-select
            style="width: 100%"
            v-model="editForm.checkState"
            placeholder="复核状态"
            filterable
          >
            <el-option label="已复核" value="已复核"></el-option>
            <el-option label="未复核" value="未复核"></el-option>
          </el-select>
        </el-form-item>
        <!-- 日期 -->
        <el-form-item label="日期">
          <el-date-picker
            style="width: 100%"
            v-model="editForm.checkDate"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editFormVisiable = false"
          >取 消</el-button
        >
        <el-button size="small" :plain="true" type="primary" @click="submitEdit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
import { Query, Addition, Modify, Delete } from "@/api/home";

export default {
  inject: ["reload"],
  data() {
    return {
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      total: 0, //总条数
      disabled: true,
      // 日期时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 渲染表格数据
      tableData: [],
      materialInformation: [], //存入本地记录
      // 新增表单
      form: {
        materialName: "",
        materialCode: "",
        materialState: [],
        dosageForm: "", //剂型
        materialSpecifications: "", //产品规格
        materialType: "", //产品类型
        materialSellbyDate: "", //产品保质期
        remark: "", //备注
        checkState: "", //复核状态
        checker: "", //复核人
        checkDate: "", //复核日期
      },
      dialogFormVisible: false, //新增弹框
      editFormVisiable: false, //修改弹框
      // 修改表单
      editForm: {
        materialName: "",
        materialCode: "",
        materialState: [],
        dosageForm: "", //剂型
        materialSpecifications: "", //产品规格
        materialType: "", //产品类型
        materialSellbyDate: "", //产品保质期
        remark: "", //备注
        checkState: "", //复核状态
        checker: "", //复核人
        checkDate: "", //复核日期
      },
      rowItem: {}, // 修改每项内容
      // 初始查询表单
      formInline: {},
      searchData: [], //查询到的数据
      multipleSelection: [], // 存储多选数据
    };
  },
  methods: {
    //查询列表
    query() {
      var data = {
        currentPage: this.currentPage,
        pageSize: 10,
        searchData:this.formInline
      };
      Query(data)
        .then((res) => {
          console.log("产品信息查询列表成功", res);
          this.tableData = res.data.data.list;
          this.total = res.data.data.total; //数据总条数
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val; //当前页
      this.query();
    },
    // 查询
    onSubmit() {
      console.log(this.formInline);
      // this.currentPage = 1; //回到第一页
      // var data = this.formInline;
      var data = {
        currentPage: this.currentPage,
        pageSize: 10,
        searchData:this.formInline
      };
      Query(data)
        .then((res) => {
          console.log("产品信息查询列表成功", res);
          this.tableData = res.data.data.list;
          this.total = res.data.data.total; //数据总条数
          // this.total = this.tableData.length; //数据总条数
          // this.tableData = res.data.data.splice(
          //   (this.currentPage - 1) * this.pageSize,
          //   this.pageSize
          // );
        })
        .catch((err) => {
          console.log(err);
        });
      // Query(data)
      //   .then((res) => {
      //     console.log("产品信息搜索列表成功", res);
      //     this.tableData = res.data.data;
      //     // this.tableData = res.data.data.splice(
      //     //   (this.currentPage - 1) * this.pageSize,
      //     //   this.pageSize
      //     // );
      //     this.total = this.tableData.length; //数据总条数
      //     // this.formInline = {};//清空表单
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    //刷新
    reset() {
      // console.log("刷新");
      this.reload();
    },
    // 分页显示
    changePage(obj) {
      console.log(obj);
      const n = (this.currentPage - 1) * this.pageSize; //需要跳过的条数
      this.tableData = obj.slice(n, n + this.pageSize);
    },
    // 增加
    addNew() {
      var data = this.form;
      Addition(data).then((result) => {
        console.log(data);
        console.log("产品信息新增列表成功", result);
        this.dialogFormVisible = false;
        this.query();
        this.$message({
          message: "恭喜你，添加成功",
          type: "success",
        });
      });
    },
    // 修改
    handleEdit(row) {
      this.editFormVisiable = true;
      this.rowItem = row;
      this.editForm = { ...row };
    },
    // 确认修改
    submitEdit() {
      var data = this.editForm;
      Modify(data)
        .then((res) => {
          console.log("产品信息修改列表成功", res);
          // this.tableData = res.data.data;
          this.dialogFormVisible = false;
          this.$message({
            message: "恭喜你，修改成功",
            type: "success",
          });
          this.editFormVisiable = false;
          this.query();
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: "修改失败",
            type: "success",
          });
        });
    },
    //多选删除
    deleteData() {
      this.$confirm(
        "此操作将永久删除 " +
          this.multipleSelection.length +
          " 个记录, 是否继续?",
        "提示",
        { type: "warning" }
      )
        .then(() => {
          var data = this.multipleSelection;
          Delete(data)
            .then((res) => {
              console.log("产品信息删除列表成功", res);
              this.dialogFormVisible = false;
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              this.query();
            })
            .catch((err) => {
              console.log(err);
              this.$message({
                message: "删除失败",
                type: "success",
              });
            });
        })
        .catch(() => {
          this.$message("已取消操作!");
        });
    },
    // 监听多选数据变化
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.multipleSelection = val.map((item) => {
        return item.id;
      });
      if (this.multipleSelection.length == 0) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
  created() {
    this.query();
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  height: 100%;
  ::v-deep .el-card__body,
  .el-main {
    padding: 10px;
  }
  .clearfix {
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
  }
  // 修改对话框高度
  .showAll_dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    ::v-deep .el-dialog {
      margin: 0 auto !important;
      height: 80%;
      overflow: hidden;
      .el-dialog__body {
        padding: 0;
        z-index: 1;
        overflow: hidden;
        overflow-y: auto;
        // 下边设置字体，我的需求是黑底白字
        // color: #ffffff;
        line-height: 30px;
        padding: 0 15px;
      }
      .el-dialog__footer {
        padding: 10px 20px 20px;
        text-align: right;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
